import React from 'react';
function Counter() {
	//在函数组件中，可以调用useState方法定义一个状态，并且把初始化设置0
	//useState会返回一个数组，第1个元素是当前的状态值 count,第2个元素是一个函数，可以用来修改count值
	const [state,setState] = React.useState(()=>{
		console.log('经过长时间复杂的计算');
		return {number:0,title:'计数器'};
	});
	//当点击按钮的时候，会执行回调函数
	//回调函数里调用setCount方法可以修改count的值
	//类似于setState,调用setCount之后组件也会重新刷新，页面也会更新
	return (
		<div>
			<p>{state.title}:{state.number}</p>
			<button onClick={()=>setState({...state,number:state.number+1})}>+</button>
		</div>
	);
}

export default Counter;

/**
 * 1.setCount和setState不一样，它不像setState那样可以合并状态对象，直接直接覆盖
 * 如果你希望保留老状态，则需要手工合并旧状态
 * 2.useState还支持惰性加载，你可以给 useState传递一个函数，这个函数会在初次的渲染的时候进行调用以生成初始状态
 *  注意: 惰性加载函数只会在组件初次挂载的时候都会地调用，后续的更新和渲染将不同调用
 */